<template>
  <el-dialog :visible.sync="dialogVisible" title="新增收货地址" width="900px" :close-on-click-modal="false" v-drag2anywhere>
    <el-form :model="formData" ref="formUI" label-width="90px" :rules="rules">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="姓名:" prop="username">
          <el-input v-model="formData.username" placeholder="姓名" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="区域:" prop="region_ids">
          <el-cascader ref="cityregion" expand-trigger="hover" :options="regionList" v-model="formData.region_ids"
            :props="{value:'region_id',label:'region_name'}" @change="handleRegionChanged" placeholder="请选择地区">
          </el-cascader>
        </el-form-item>
      </el-col>
      	</el-row>
      <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="手机号码:" prop="mobile">
          <el-input v-model="formData.mobile" placeholder="手机号码"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="16" >
        <el-form-item label="详细地址:" prop="address">
          <el-input v-model="formData.address" placeholder="详细地址"></el-input>
        </el-form-item>
      </el-col>
      </el-row>


    <el-row :gutter="20">
    	<el-col>
    		<el-form-item label="单位名称" prop="company">
    		  <el-autocomplete v-model="formData.company" placeholder="收货单位" :fetch-suggestions="querySearchAsync"
    		    style="width: 100%;">
    		  </el-autocomplete>
    		</el-form-item>
    	</el-col>
    </el-row>
    <el-row :gutter="20">
    	<el-col>
    		<el-form-item label="供应商" prop="supname">
    			<el-select v-model="formData.supname" style="width: 100%;" @change="handleSupChange"
    				placeholder="请选择供应商">
    				<el-option v-for="(item,index) in suppliers" :label="item.name" :key="item.index"
    					:value="item.name">
    				</el-option>
    			</el-select>
    		</el-form-item>
    	</el-col>
    </el-row>
    <el-row :gutter="20">
    	<el-col>
    		<el-form-item label="备注:">
    			<el-input type="textarea" v-model="formData.memo" :rows="5" placeholder="备注信息"></el-input>
    		</el-form-item>
    	</el-col>
    </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
      <el-button type="primary" size="medium" @click="handleSave">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        formData: {
          username: '',
          mobile: '',
          mobile1: '',
          region_ids: [],
          region_values: [],
          address: '',
          company: '',
          supid: -1,
          supname: '',
          memo: ''
        },
        suppliers: [],
        regionList: [],
        dialogVisible: false,
        rules: {
          username: [{
            required: true,
            message: '请正确填写姓名!',
            trigger: 'blur'
          }],
          mobile: [{
            required: true,
            message: '请正确填写手机号!',
            trigger: 'blur'
          }],
          region_ids: [{
            required: true,
            message: '请正确选择地区!',
            trigger: 'change'
          }],
          address: [{
            required: true,
            message: '请正确填写详细地址!',
            trigger: 'blur'
          }],
          supname: [{
            required: true,
            message: '请正确填写详细地址!',
            trigger: 'change'
          }],
        }
      }
    },
    mounted() {
      this.loadRegions();
      this.loadSuppliers();

    },
    methods: {
      querySearchAsync(str,cb){
        this.axios.post("api/admin/client/filter", {
          name: str
        }).then(res => {
          if (res.data.code) {
            cb(res.data.data);
          }
        })
      },

      init() {
        if (this.$refs.formUI) {
          this.$refs.formUI.resetFields();
        }
        this.formData = {
          username: '',
          region_ids: [],
          region_values: [],
          company: '',
          supid: localStorage.getItem("accountid"),
          supname: localStorage.getItem("account"),
          memo: '',
          addressmore:[
             {
               mobile:'',
               address:''
             }
          ],
        };
      },
      handleSave() {
        this.$refs.formUI.validate(ok => {
          if (ok) {
            const params = JSON.parse(JSON.stringify(this.formData));
            this.axios.post("api/admin/clientuser/create", params).then(res => {
              if (res.status == 200 && res.data.code == 0) {
                this.$message.success({
                  message: '更新客户信息成功!',
                  duration: 1000,
                  showClose: true
                });
                this.$emit("closeHandler");
                this.dialogVisible = false;
              } else {
                this.$message.error({
                  message: res.data.msg,
                  duration: 1000,
                  showClose: true
                });
              }
            })
            return true;
          }
          return false;
        })

      },
      loadSuppliers() {
        this.axios.post("api/admin/account/list").then((res) => {
          if (res.status == 200 && res.data.code == 0) {
            this.suppliers = res.data.list;
          }
        });
      },
      handleSupChange(sup) {
        var option = this.suppliers.filter(function(cur, index, a) {
          if (cur.name == sup) {
            return cur;
          }
        })[0];
        this.formData.supid = option.id;
        this.formData.supname = option.name;
      },
      loadRegions() {
        this.axios.post("api/common/region/list").then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.regionList = res.data.data;
          }
        })
      },
      handleRegionChanged(region) {
        this.formData.region_ids = region;
        this.formData.region_values = this.$refs["cityregion"].getCheckedNodes()[0].pathLabels;
      },
    }
  }
</script>

<style>
</style>
